<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="">

    <style>
        /* .btn{
            position: relative;
            padding: 4px;
            background-color: #000;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .btn::before{
            content: "";
            width: 300px;
            height: 300px;
            position: absolute;
            background-image: conic-gradient(transparent,
            #26b94d,#a8b826,#f2c926,transparent 50%);
            animation: rotate 3.5s linear infinite;
        }
        .btn span{
            color: white;
            background-color: #111;
            padding: 1.5rem 3rem;
            position: relative;
        }

        @keyframes rotate{
            100%{
                rotate: 360deg;
            }
        } */

        .card{
            color: aliceblue;
            margin: 0 auto;
            padding: 2em;
            width: 300px;
            background-color: black;
            text-align: center;
            border-radius: 10px;
            position: relative;
        }
        @property  --angle{
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }
        .card::before, .card::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: conic-gradient(from var(--angle),red,blue,green,yellow,orange,purple,pink,red);
            /* background-image: conic-gradient(from var(--angle),transparent 70% ,rgb(163, 15, 84)); */
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            z-index: -1;
            padding: 4px;
            border-radius: 10px;
            animation: 3s spin linear infinite;

        }

        .card::before{
            filter: blur(1.5rem);
            opacity: 0.5;
        }

        @keyframes spin{
            from{
                --angle: 0deg;
            }
            to{
                --angle: 360deg;
            }
        }
    </style>

    <div class="card">
        <span>Hoverme</span>

        <p>111111111111111</p>
        <p>111111111111111</p>
        <p>111111111111111</p>
        <p>111111111111111</p>
        <p>111111111111111</p>

    </div>
    
</body>
</html>